import {  useEffect, useRef, useState } from "react";
import { Circle, Rectangle, Triangle,Shape } from "../../model/Shape/Shape";
import PeekCanvas from "../../utils/PeekCanvas";
// import CommonDrawer from "../canvas";

export default function IDrawer(){
    const canvasRef=useRef<HTMLCanvasElement>(null);
    const [activeShape,setActiveShape]=useState<Shape>();
    const [drag,setDrag]=useState<boolean>(false);
    // const ctx=ref.current.getContext("2d");
    // canvasRef.?current.getContext("2d");
    const ctx=PeekCanvas(canvasRef.current);
    const handMove=(e: React.MouseEvent<HTMLCanvasElement>)=>{
        // console.log(`移动的坐标:${e.clientX},${e.clientY}`)
        // console.log(ctx);
        // ctx?.arc(e.clientX, e.clientY,50,0, 2 * Math.PI)
    }
    const shapeList=[
        new Circle(100,100,50,'red',0),
        new Triangle(200,200,100,'green',1),
        new Rectangle(300,300,100,50,'blue',2)
    ]
    const [shapeData,setShapeData]=useState(shapeList)
    //模拟componentDidMount
    // useEffect(()=>{
    //     if(ctx){
    //     }
    // },[])
   const mouseupFunc=(event:React.MouseEvent<HTMLCanvasElement>)=>{
       console.log("鼠标放开")
       setDrag(false);
   }
   const mousemoveFunc =(event:React.MouseEvent<HTMLCanvasElement>) =>{
        // 如果现在已经选中了一个图形
        if (activeShape&&drag) {
            let x = event.clientX
            let y = event.clientY
            activeShape.setPosition(x, y)
            if(ctx){
                // activeShape.draw(ctx);
                draw()
            }
        }
    }
    const mousedownFunc= (event:React.MouseEvent<HTMLCanvasElement>)=> {
        // setDrag(true)
        // let x = event.offsetX
        let x = event.clientX
        // let y = event.offsetY
        let y = event.clientY
        let hoverList:Shape[] = []
        // 首先筛选出点击的图形
        shapeData.forEach(shape => {
            shape.isHovered(x, y) && (hoverList.push(shape))
        })
        if (hoverList.length) {
            // 对选中的图形做排序，zIndex最大的那个图形即当前鼠标选择的图形
            hoverList.sort((x, y) => y.zIndex - x.zIndex)
            // 将当前选中的图形实例赋值到 this.activeShape
            // activeShape = hoverList[0]
            setActiveShape(hoverList[0])
            // 将当前选中的图形的 zIndex 设置为最大
            if(activeShape){
                // activeShape.setOffset(x, y)
                activeShape.zIndex = Math.max(...shapeData.map(shape => shape.zIndex)) + 1
            }
            // 将当前的 shapeList 排序，确保 zIndex 越大的图形越后绘制
            shapeData.sort((x, y) => x.zIndex - y.zIndex)
            setDrag(true)
        }
    }
    function draw() {
        if(ctx){
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            shapeData.forEach((shape)=>{shape.draw(ctx)})
        }
    }
    draw()
    //画矩形
    return(
        <div>
        <canvas ref={canvasRef} 
        onMouseMove={mousemoveFunc} 
        onMouseDown={mousedownFunc}
        onMouseUp={mouseupFunc}>
            当前浏览器不支持canvas
        </canvas>
    </div>
    )
}